<template>
  <div>
    <slot
      name="input"
      :value-text="value | dateFilter(formatter)"
      :show-picker="showPicker"
    >
      <van-field
        class="buildPageInput"
        :value="value | dateFilter(formatter)"
        :label="label"
        placeholder=""
        readonly
        :rules="rules"
        :is-link="!disabled"
        :required="required"
        @click="showPicker"
      />
    </slot>
    <van-popup
      v-model="picker.show"
      position="bottom"
      get-container="body"
      lazy-render
    >
      <van-datetime-picker
        :title="pickerTitle"
        v-model="picker.date"
        show-toolbar
        :type="type"
        :max-date="maxDate"
        :min-date="minDate"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
  </div>
</template>

<script>
import { timeFormat } from '@/utils/time'
export default {
  name: 'DatePicker',
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {},
    disabled: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'datetime'
    },
    pickerTitle: {
      type: String,
      default: ''
    },
    rules: {
      type: Array,
      default () {
        return []
      }
    },
    formatter: {
      type: String,
      default: 'yyyy-MM-dd'
    },
    maxDate: {
      type: Date,
      default () {
        const year = new Date().getFullYear() + 10
        return new Date(new Date().setFullYear(year))
      }
    },
    minDate: {
      type: Date,
      default () {
        const year = new Date().getFullYear() - 10
        return new Date(new Date().setFullYear(year))
      }
    },
    required: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      picker: {
        show: false,
        date: new Date()
      }
    }
  },
  created () {
    if (this.value) {
      if (typeof this.value === 'string') {
        this.picker.date = new Date(this.value.replace(/-/g, '/').replace(/\./g, '/'))
      }
    }
  },
  methods: {
    onConfirm (value) {
      const diff = timeFormat(this.value, this.formatter) !== timeFormat(this.picker.date, this.formatter)
      const result = timeFormat(value, this.formatter)
      this.$emit('input', result)
      this.$emit('confirm', result)
      if (diff) {
        this.$emit('change', result)
      }
      this.picker.show = false
    },
    onCancel () {
      this.picker.show = false
    },
    onChange () {

    },
    showPicker () {
      if (!this.disabled) {
        this.picker.show = true
      }
    }
  },
  filters: {
    // optionFilter (value, columns) {
    //   const option = columns.find(item => item.value === value)
    //   if (option) {
    //     return option.text
    //   } else {
    //     return value
    //   }
    // }
    dateFilter (date, formatter) {
      if (date === '') {
        return date
      }
      return timeFormat(date, formatter)
    }
  }
}
</script>

<style scoped>

</style>
